import React from 'react';
import { Form, Input, Icon, Button, Card } from 'antd';
import { connect } from 'dva';

import styles from './index.css';

/**
 *  登录界面
 */
@connect(({ loading }) => ({
  loading
}))
@Form.create()
class ChangePasswordPage extends React.Component {
  handleSubmit = e => {
    e.preventDefault(); // 这样就好了
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values);
      if (!err) {
        this.props.dispatch({
          type: 'changePassword/resetPwd',
          payload: {
            password: values.NewPassword
          }
        });
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={styles.changePasswordPage}>
        <h2>Setting-Change password</h2>
        <Form onSubmit={this.handleSubmit} className="login-form">
          <Card bordered={false} style={{ width: 300 }}>
            <h4>Change password</h4>
            <Form.Item label="Warehouse name">
              {getFieldDecorator('warehouse name', {
                rules: [{ required: true, message: 'Please input your warehouse name!' }]
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="warehouse name"
                />
              )}
            </Form.Item>
            <Form.Item label="Code">
              {getFieldDecorator('Code', {
                rules: [{ required: true, message: 'Please input your Code!' }]
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="Code"
                  placeholder="Code"
                />
              )}
            </Form.Item>
            <Form.Item label="Area">
              {getFieldDecorator('area', {
                rules: [{ required: true, message: 'Please input your area!' }]
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="area"
                  placeholder="area"
                />
              )}
            </Form.Item>
          </Card>
          <Form.Item
            style={{
              width: 300,
              display: 'flex',
              justifyContent: 'center'
            }}
          >
            <Button style={{ padding: '0 50px' }} type="primary" htmlType="submit" className="login-form-button">
              save
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default ChangePasswordPage;
